<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.green {
			width: 100px; height: 100px;
			background-color: green;
			float: left;
		}
		.red {
			width: 200px; height: 150px;
			background-color: red;
		}
		.a {
			width: 200px;
			background-color: green;
		}
		.b {
			width: 700px;
			background-color: red;
		}
		.c {
			width: 300px;
			background-color: blue;
		}
		
		.a,.b,.c {
			float: left; height: 200px;
		}
	</style>
	<body>
		<p>文字环绕效果</p>
		<div class="green"></div>
		<div class="red">文字环绕文字环绕</div>
		
		<p>横向排版布局</p>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
	</body>
</html>
